import 'package:bruno/bruno.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:meal/constant/antd_icons.dart';
import 'package:meal/constant/sizes.dart';
import 'package:meal/utils/colors.dart';
import 'package:meal/utils/styles.dart';
import 'package:meal/utils/tools.dart';

class ProductMeal extends StatefulWidget {
  const ProductMeal({Key? key}) : super(key: key);

  @override
  State<ProductMeal> createState() => _ProductMealState();
}

class _ProductMealState extends State<ProductMeal> {
  String tag = '';
  String unit = '';

  List<String> tags = [
    '双份蛋肠/987份',
    '肉蛋肠/105份',
    '鸡蛋油条肠/份',
  ];

  double get leftWidth {
    return Sizes.default90;
  }

  double get rowHeight {
    return Sizes.default60;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ToolsUtils.getDefaultBackgroundColor(),
      appBar: ToolsUtils.getDefaultBrnAppBar('添加套餐规格',
          actions: ToolsUtils.actions('确定', pressed: () {
            Get.back();
          })),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              margin: const EdgeInsets.only(top: Sizes.default15),
              padding: const EdgeInsets.symmetric(
                  vertical: Sizes.default10, horizontal: Sizes.default15),
              decoration: const BoxDecoration(color: Colors.white),
              child: ListBody(
                children: [
                  Container(
                    height: rowHeight,
                    alignment: Alignment.centerLeft,
                    child: Row(
                      children: [
                        Container(
                            width: leftWidth,
                            alignment: Alignment.centerLeft,
                            child: Text.rich(
                              TextSpan(
                                  text: '套餐规格',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: Sizes.default15, color: ColorsUtils.color333)),
                            )),
                        Expanded(
                            child: Container(
                          height: Sizes.default45,
                          padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                          decoration: BoxDecoration(
                              color: ColorsUtils.rgba(247, 247, 247, 1),
                              borderRadius:
                                  const BorderRadius.all(Radius.circular(Sizes.default10))),
                          child: TextField(
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color363, fontSize: Sizes.default15),
                            decoration: InputDecoration(
                                border: const OutlineInputBorder(
                                  borderSide: BorderSide.none,
                                ),
                                isCollapsed: true,
                                filled: true,
                                fillColor: Colors.transparent,
                                contentPadding: const EdgeInsets.symmetric(
                                    horizontal: Sizes.default10, vertical: Sizes.default10),
                                constraints: const BoxConstraints(minHeight: Sizes.default45),
                                hintText: '规格A',
                                hintStyle: StylesUtils.customTextStyle(
                                    fontSize: Sizes.default14, color: ColorsUtils.color999)),
                            keyboardType: TextInputType.number,
                            onChanged: (String content) {
                              setState(() {});
                            },
                          ),
                        ))
                      ],
                    ),
                  ),
                  Container(
                    height: rowHeight,
                    alignment: Alignment.centerLeft,
                    child: Row(
                      children: [
                        Container(
                            width: leftWidth,
                            alignment: Alignment.centerLeft,
                            child: Text.rich(
                              TextSpan(
                                  text: '套餐标签',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: Sizes.default15, color: ColorsUtils.color333)),
                            )),
                        Expanded(
                          child: InkWell(
                            onTap: openDialog,
                            child: Container(
                              height: Sizes.default45,
                              padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                              alignment: Alignment.centerLeft,
                              decoration: BoxDecoration(
                                  color: ColorsUtils.rgba(247, 247, 247, 1),
                                  borderRadius:
                                      const BorderRadius.all(Radius.circular(Sizes.default10))),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Text('添加标签4/5',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: Sizes.default15, color: ColorsUtils.color797)),
                                  BrunoTools.getAssetSizeImage(BrnAsset.iconRightArrow, 16, 16)
                                ],
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  ...tags
                      .map((e) => Container(
                            height: 35,
                            margin: const EdgeInsets.symmetric(vertical: Sizes.default10),
                            child: FractionallySizedBox(
                              widthFactor: 0.8,
                              child: Stack(
                                clipBehavior: Clip.none,
                                children: [
                                  Container(
                                      decoration: BoxDecoration(
                                          color: ColorsUtils.rgba(242, 242, 242, 1),
                                          borderRadius: BorderRadius.circular(Sizes.default5)),
                                      alignment: Alignment.center,
                                      child: Text(
                                        e,
                                        style: StylesUtils.customTextStyle(
                                            fontSize: Sizes.default13, color: ColorsUtils.color333),
                                      )),
                                  Positioned(
                                      top: -12.5,
                                      right: 7.5,
                                      width: 15,
                                      height: 15,
                                      child: TextButton(
                                          onPressed: () {},
                                          child: Icon(
                                            AntdIcons.closeCircleFill,
                                            color: ColorsUtils.parseColorFromHexString(
                                                ColorsUtils.colorFf6),
                                            size: Sizes.default12,
                                          )))
                                ],
                              ),
                            ),
                          ))
                      .toList()
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Future<void> openDialog() async {
    int? result = await showDialog<int>(
      context: context,
      barrierColor: Colors.black54,
      builder: (BuildContext dialogContext) {
        return StatefulBuilder(
          builder: (BuildContext context, StateSetter setState) {
            return Material(
              color: Colors.transparent,
              child: Center(
                child: Container(
                  height: 220,
                  width: Get.width - 20,
                  decoration: BoxDecoration(
                      color: Colors.white, borderRadius: BorderRadius.circular(Sizes.default10)),
                  child: Column(
                    children: [
                      Container(
                        height: Sizes.default50,
                        alignment: Alignment.center,
                        child: Text(
                          '添加套餐标签',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color333, fontSize: Sizes.default18),
                        ),
                      ),
                      Container(
                        height: Sizes.default60,
                        padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                        child: FractionallySizedBox(
                            widthFactor: 0.8,
                            child: TextField(
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color363, fontSize: Sizes.default15),
                              decoration: InputDecoration(
                                  border: OutlineInputBorder(
                                      borderSide: BorderSide(
                                        color: ColorsUtils.rgba(204, 204, 204, 1),
                                      ),
                                      borderRadius: BorderRadius.circular(Sizes.default3)),
                                  focusedBorder:
                                      const OutlineInputBorder(borderSide: BorderSide.none),
                                  isCollapsed: true,
                                  filled: true,
                                  fillColor: Colors.transparent,
                                  contentPadding: const EdgeInsets.symmetric(
                                      horizontal: Sizes.default10, vertical: Sizes.default10),
                                  constraints: const BoxConstraints(minHeight: Sizes.default40),
                                  hintText: '标签',
                                  hintStyle: StylesUtils.customTextStyle(
                                      fontSize: Sizes.default15, color: ColorsUtils.color999)),
                              keyboardType: TextInputType.text,
                              onChanged: (String content) {
                                setState(() {
                                  tag = content;
                                });
                              },
                            )),
                      ),
                      Container(
                        height: Sizes.default60,
                        padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                        child: FractionallySizedBox(
                            widthFactor: 0.8,
                            child: TextField(
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color363, fontSize: Sizes.default15),
                              decoration: InputDecoration(
                                  border: OutlineInputBorder(
                                      borderSide: BorderSide(
                                        color: ColorsUtils.rgba(204, 204, 204, 1),
                                      ),
                                      borderRadius: BorderRadius.circular(Sizes.default3)),
                                  focusedBorder:
                                  const OutlineInputBorder(borderSide: BorderSide.none),
                                  isCollapsed: true,
                                  filled: true,
                                  fillColor: Colors.transparent,
                                  contentPadding: const EdgeInsets.symmetric(
                                      horizontal: Sizes.default10, vertical: Sizes.default10),
                                  constraints: const BoxConstraints(minHeight: Sizes.default40),
                                  hintText: '请输入商品库存数量，限1-9999',
                                  hintStyle: StylesUtils.customTextStyle(
                                      fontSize: Sizes.default15, color: ColorsUtils.color999)),
                              keyboardType: TextInputType.number,
                              onChanged: (String content) {
                                setState(() {
                                  unit = content;
                                });
                              },
                            )),
                      ),
                      Container(
                        height: Sizes.default50,
                        decoration: BoxDecoration(
                            border: Border(
                                top: BorderSide(
                                    color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                        child: Row(
                          children: [
                            Expanded(
                                child: Container(
                                    alignment: Alignment.center,
                                    decoration: BoxDecoration(
                                        border: Border(
                                            right: BorderSide(
                                                color: ColorsUtils.parseColorFromHexString(
                                                    '#D7D7D7')))),
                                    child: TextButton(
                                      onPressed: () {
                                        Navigator.of(context).pop(0);
                                      },
                                      child: Text(
                                        '取消',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: Sizes.default16, color: ColorsUtils.color333),
                                      ),
                                    ))),
                            Expanded(
                                child: Container(
                              alignment: Alignment.center,
                              child: TextButton(
                                  onPressed: () {
                                    Navigator.of(context).pop(1);
                                  },
                                  child: Text(
                                    '确定',
                                    style: StylesUtils.customTextStyle(
                                        fontSize: Sizes.default16, color: ColorsUtils.colorFf6),
                                  )),
                            ))
                          ],
                        ),
                      )
                    ],
                  ),
                ),
              ),
            );
          },
        );
      },
    );
    if (result == 1 && tag.isNotEmpty && unit.isNotEmpty) {
      setState(() {
        tags.add('$tag/$unit');
        tag = unit = '';
      });
    }
  }
}
